import "./ownEach.js";
const React = {
    // 将虚拟DOM转为真实DOM,放入到container当中
    render(virDOM,container){
        // 创建元素
        const el = document.createElement(virDOM.type);
        virDOM.props.ownEach(function(key,value){
            if(key==="style"){
                Object.assign(el.style, value);
            }
            if(key==="className"){
                el.className = value;
            }
            if(key==="children"){
                // 判断value是否为数组，如果不是数组让其变为数组
                if(!Array.isArray(value)) value = [value];
                value.forEach(item=>{
                    // item是虚拟DOM元素，放到el中
                    if(typeof item === "object")
                        render(item,el);
                    else el.innerHTML = item;
                })

                // 判断类型是否为一个数组
                // if(Array.isArray(value)){
                //     value.forEach(item=>{
                //         // item是虚拟DOM元素，放到el中
                //         if(typeof item === "object")
                //             render(item,el);
                //         else el.innerHTML = item;
                //     })
                // }else{
                //     if(typeof value === "object")
                //         render(value,el);
                //     else
                //         el.innerHTML = value;
                // }

            }
        })

        container.appendChild(el);
    },
    // render(virDOM,container){
    //     // 创建元素
    //     const el = document.createElement(virDOM.type);
    //     // props--->children 包裹的内容
    //     // children是一个数组，数组中是虚拟DOM元素。el中包裹的元素的数量与数组一致
    //     // TypeError: Cannot read properties of undefined (reading 'children')
    //     // 判断virDOM.props.children是否有值
    //     if(virDOM.props.style){
    //         Object.assign(el.style, virDOM.props.style);
    //     }
    //     if(virDOM.props.className){
    //         el.className = virDOM.props.className;
    //     }
    //     if(virDOM.props.children){
    //         // 判断类型是否为一个数组
    //         if(Array.isArray(virDOM.props.children)){
    //             virDOM.props.children.forEach(item=>{
    //                 // item是虚拟DOM元素，放到el中
    //                 render(item,el);
    //             })
    //         }else{
    //             el.innerHTML = virDOM.props.children;
    //         }
    //
    //     }
    //     container.appendChild(el);
    // },
    // 第一个参数标签的名字，第二个参数是属性对象，第三个参数往后是包裹的内容
    createElement(type, props, ...children) {
        if(typeof type !== "string") throw new TypeError("type must be a string");
        if(typeof props !== "object") throw new TypeError("props must be a object");

        return {
            $$typeof: Symbol("react.element"),
            key: null,
            props: {
                ...props,
                children:children.length===1?children[0]:children
            },
            ref: null,
            type
        }
    }
}
const {createElement,render} = React;
export {
    React as default,
    createElement,
    render
}